<template>
  <div>
    <el-form-item label="编号" required>
      <el-input v-model="id"></el-input>
    </el-form-item>
    <el-form-item label="名称" required>
      <el-input v-model="name"></el-input>
    </el-form-item>
    <el-form-item label="请选择表单类型" v-show="true">
      <avue-select style="width: 100%" v-model="nodeForm.activitiFormType" :props="formTypeProps" placeholder="请选择请选择表单类型" :dic="formTypeDic"></avue-select>
    </el-form-item>
    <el-form-item label="请选择表单" v-if="nodeForm.activitiFormType===systemDictionary.activitiFormTypes.systemDynamicForm">
      <avue-input-table :props="formTypeSystemFormProps" :column="formTypeSystemFormColumn" :on-load="formTypeSystemFormLoad"
                        v-model="nodeForm.activitiFormValue" :formatter="formTypeSystemFormFormatter" placeholder="请选择表单数据"></avue-input-table>
    </el-form-item>

    <el-form-item label="请选择处理人类型" v-show="true">
      <avue-select style="width: 100%"
                   v-model="nodeAssignee.activitiAssigneeType"
                   :props="activitiAssigneeTypeProps"
                   placeholder="请选择请处理人类型"
                   :dic="activitiAssigneeTypeDic"></avue-select>
    </el-form-item>
    <el-form-item label="请选择处理人" v-show="true"
                  v-if="nodeAssignee.activitiAssigneeType===systemDictionary.activitiAssigneeType.fixedAssignee">
      <avue-input-table
          :props="activitiAssigneeValueProps"
          :column="nodeAssigneeColumn"
          :on-load="nodeAssigneeLoad"
          v-model="nodeAssignee.activitiAssigneeValue"
          :formatter="nodeAssigneeFormatter"
          placeholder="请选择处理人"></avue-input-table>
    </el-form-item>
    <el-form-item label="请选择处理部门" v-show="true" v-if="nodeAssignee.activitiAssigneeType===systemDictionary.activitiAssigneeType.fixedDeptUsers">
      <avue-input-tree style="width: 100%"
                       :props="treeDeptProps"
                       :dic="deptTreeData"
                       type="tree"
                       v-model="nodeAssignee.activitiAssigneeValue"
                       placeholder="请选择处理部门"></avue-input-tree>
    </el-form-item>
    <el-form-item label="请选择处理角色" v-show="true" v-if="nodeAssignee.activitiAssigneeType===systemDictionary.activitiAssigneeType.fixedRoleUsers">
      <avue-input-tree style="width: 100%"
                       :props="treeRoleProps"
                       :dic="treeRoleData"
                       type="tree"
                       v-model="nodeAssignee.activitiAssigneeValue"
                       placeholder="请选择处理部门"></avue-input-tree>
    </el-form-item>
    <el-form-item label="请选择处理角色" v-show="true" v-if="nodeAssignee.activitiAssigneeType===systemDictionary.activitiAssigneeType.startUserDeptAdminUser">
      <avue-input-tree style="width: 100%"
                       :props="treeRoleProps"
                       :dic="treeRoleData"
                       type="tree"
                       v-model="nodeAssignee.activitiAssigneeValue"
                       placeholder="请选择处理部门"></avue-input-tree>
    </el-form-item>
    <el-form-item label="文档" v-show="false">
      <el-input type="textarea" v-model="documentation"></el-input>
    </el-form-item>
    <!--    <el-form-item label="多实例类型">-->
    <!--      <el-select v-model="multiinstance_type"> &lt;!&ndash;相当于bpmn2.0标准中的isSequential&ndash;&gt;-->
    <!--        <el-option label="非多实例" value="None"></el-option>-->
    <!--        <el-option label="同时进行" value="Parallel"></el-option>-->
    <!--        <el-option label="顺序进行" value="Sequential"></el-option>-->
    <!--      </el-select>-->
    <!--    </el-form-item>-->
    <el-form-item label="基数 (多实例)" v-show="false"><!--后端暂时没用到-->
      <el-input v-model="multiinstance_cardinality" type="number"></el-input>
    </el-form-item>
    <el-form-item label="元素的变量(多实例)" v-show="false"><!--后端暂时没用到-->
      <el-input v-model="multiinstance_variable"></el-input>
    </el-form-item>
    <el-form-item label="通过权重[1-100]">
      <el-input-number v-model="multiinstance_condition" :min="1" :max="100" style="width: 100%"></el-input-number>
    </el-form-item>
  </div>
</template>
<script>
import BaseProperties from "@/components/activit/properties/BaseProperties";
import userOption from "@/option/sys/userOption";
import userApi from "@/api/sys/userApi";
import deptApi from "@/api/sys/deptApi";
import roleApi from "@/api/sys/roleApi";
import treeUtils from "@/utils/treeUtils";
import optionUtils from "@/option/optionUtils";
import modelApi from "@/api/start/activiti/modelApi";
import modelOption from "@/option/start/activiti/modelOption";


const forEach = require('lodash/forEach');
// 用户任务属性组件
export default {
  mixins: [BaseProperties],
  name: "UserTaskProps",
  props: {
    nodeForm: {
      type: Object,
      default: () => {
        return {}
      }
    },
    nodeAssignee: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    activitiAssigneeTypeCode() {
      return "activiti_assignee_types";
    },
    activitiAssigneeValueProps() {
      return {
        label: 'userName',
        value: 'id'
      }
    },
    nodeAssigneeColumn() {
      return {
        children: userOption()
      }
    },
    treeRoleProps() {
      return {
        label: "name",
        value: "id"
      }
    },
    treeDeptProps() {
      return {

        label: "name",
        value: "id",

      }
    }

  },
  data() {
    return {
      modeling: null,
      id: this.element.id || '',
      name: '',
      formKey: '',
      documentation: '',
      multiinstance_type: '',
      multiinstance_collection: '',
      multiinstance_condition: '',
      multiinstance_cardinality: null,
      multiinstance_variable: null,
      deptTreeData: [],
      treeRoleData:[],
      // 原子节点属性
      positions: [],
      priority: '',
      candidateGroups: '没有受让人'
    }
  },
  created() {
    this.loadDeptTree();
    this.loadRoleTree();
  },
  methods: {
    nodeAssigneeFormatter(row) {
      if (!row) return null;
      if (row.realName) return row.realName;
      return row.userName;
    },
    nodeAssigneeLoad(onLoadParams, callback) {
      onLoadParams.pageDefinition = userApi.list
      onLoadParams.valueDefinition = userApi.getUserInfo
      onLoadParams.option = this.nodeAssigneeColumn.children;
      optionUtils.tableOnLoad(onLoadParams, callback)
    },
    loadDeptTree() {
      deptApi.getAllDept().then(res => {
        this.deptTreeData = treeUtils.listToTree(res.data.data);
      })
    },
    loadRoleTree() {
      roleApi.list().then(res => {
        this.treeRoleData = treeUtils.listToTree(res.data.data);
      })
    }
  },


  watch: {
    name: {
      handler(newVal, oldVal) {
        this.modeling.updateProperties(this.element, {
          name: newVal
        });
      }
    },

    //监视元素变化
    element: {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal.type === 'bpmn:UserTask') {
          const bpmnModeler = this.bpmnModeler();
          const modeling = bpmnModeler.get('modeling');
          const businessObject = newVal.businessObject;
          this.name = businessObject.name;
          this.formKey = businessObject.get('formKey');
          // 原子
          const candidateGroupsTemp = businessObject.get('candidateGroups');
          // 解决后端反显和切换节点反显candidateGroupsTemp类型不一致问题
          if (candidateGroupsTemp && candidateGroupsTemp.length > 0) {
            if (Array.isArray(candidateGroupsTemp)) {
              //切换节点反显
              this.candidateGroups = businessObject.get('candidateGroups');
            } else {
              //后端反显
              this.candidateGroups = businessObject.get('candidateGroups').split(',');
            }
          }
          // this.multiinstance_type = businessObject.get('multiinstance_type') || 'None';
          // this.multiinstance_condition = businessObject.get('multiinstance_condition') || '';
          // modeling.updateProperties(newVal, {'multiinstance_type': this.multiinstance_type});
          // modeling.updateProperties(newVal, {'multiinstance_condition': this.multiinstance_condition});
        }
      }
    },
    formKey: {
      handler(newVal, oldVal) {
        this.modeling.updateProperties(this.element, {'formKey': newVal});
      }
    },
    multiinstance_type: {
      handler(newVal, oldVal) {
        // this.modeling.updateProperties(this.element, {'multiinstance_type': newVal});
      }
    },
    multiinstance_collection: {
      handler(newVal, oldVal) {
        this.modeling.updateProperties(this.element, {'multiinstance_collection': newVal});
      }
    },
    multiinstance_condition: {
      handler(newVal, oldVal) {
        this.modeling.updateProperties(this.element, {'multiinstance_condition': newVal});
      }
    },
    priority: {
      handler(newVal, oldVal) {
        this.modeling.updateProperties(this.element, {'priority': newVal});
      }
    },
    candidateGroups: {
      handler(newVal, oldVal) {
        this.modeling.updateProperties(this.element, {'candidateGroups': newVal});
      }
    }
  }

}
</script>
<style>

</style>
